<template>
  <div class="custom-resources-download">
    <div class="custom-resources-header">
      <el-image :src="image" />
      <div class="custom-article">
        <div class="custom-resources-body">
          <div class="header-title title-h1">资源下载中心</div>
          <div class="header-title title-h5">为全校师生提供"制式表单"资源下载</div>
        </div>
      </div>
      <div class="custom-resources-statistical">
        <div class="custom-resources-body">
          <div class="custom-resources-content">
            <div class="statistical-left">
              <div class="statistical-content">
                <div class="statistical-article">
                  <div class="statistical-article-center">
                    <div class="statistical-content">
                      <div class="content-body">
                        <div class="content-title">表单资源</div>
                        <div class="content-number"><label>105</label>&nbsp;&nbsp;张</div>
                      </div>
                    </div>
                  </div>
                  <div class="statistical-article-center">
                    <div class="statistical-content half">
                      <div class="content-body">
                        <div class="content-half">
                          <div class="content-title">累计下载次数</div>
                          <div class="content-number"><label>289</label>&nbsp;&nbsp;次</div>
                        </div>
                        <div class="content-half">
                          <div class="content-title">累计服务用户</div>
                          <div class="content-number"><label>113</label>&nbsp;&nbsp;位</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="statistical-article-center">
                    <div class="statistical-content half">
                      <div class="content-body">
                        <div class="content-half">
                          <div class="content-title">服务部门</div>
                          <div class="content-number"><label>11</label>&nbsp;&nbsp;个</div>
                        </div>
                        <div class="content-half">
                          <div class="content-title">表单类型</div>
                          <div class="content-number"><label>8</label>&nbsp;&nbsp;种</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="statistical-right">
              <div class="statistical-content">
                <div class="statistical-article statistical-bak" :style="{ backgroundImage: 'url('+bak+')'}">
                  <div class="statistical-right-image statistical-bak" :style="{ backgroundImage: 'url('+headerImage+')'}">下载最多</div>
                  <div class="statistical-right-li first">研究生外出实习申请表</div>
                  <div class="statistical-right-li last">下载次数：104次</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="custom-resources-footer">
      <div class="custom-query-body">
        <div class="custom-resources-body">
          <div class="custom-resources-input">
            <el-input v-model="input" placeholder="请输入内容" class="input-with-select">
              <el-select slot="prepend" v-model="select" placeholder="请选择">
                <el-option label="表单名称" value="a" />
                <el-option label="来源" value="b" />
              </el-select>
              <el-button slot="append" icon="el-icon-search" />
            </el-input>
          </div>
        </div>
      </div>
      <div class="custom-article-li" style="height: 40px">
        <div class="custom-resources-body">
          <div class="custom-ul">
            <div class="custom-ul-li" :class="active === 1?'active':''" @click="changeMenu(1)">全部</div>
            <div class="custom-ul-li" :class="active === 2?'active':''" @click="changeMenu(2)">学生服务</div>
            <div class="custom-ul-li" :class="active === 3?'active':''" @click="changeMenu(3)">资源申请</div>
            <div class="custom-ul-li" :class="active === 4?'active':''" @click="changeMenu(4)">财务资产</div>
            <div class="custom-ul-li" :class="active === 5?'active':''" @click="changeMenu(5)">出国出境</div>
            <div class="custom-ul-li" :class="active === 6?'active':''" @click="changeMenu(6)">工程申报</div>
            <div class="custom-ul-li" :class="active === 7?'active':''" @click="changeMenu(7)">教学服务</div>
            <div class="custom-ul-li" :class="active === 8?'active':''" @click="changeMenu(8)">人才聘用</div>
            <div class="custom-ul-li" :class="active === 9?'active':''" @click="changeMenu(9)">人员管理</div>
          </div>
        </div>
      </div>
      <div class="custom-file-body">
        <div class="custom-resources-body flex">
          <el-row :gutter="20">
            <el-col :span="8" class="custom-col">
              <div class="file-li">
                <div class="file-image"><el-image :src="word" /></div>
                <div class="file-content">
                  <div class="file-title">陕西省机关事业单位工勤人员升等级岗位考核审批表</div>
                  <div class="file-footer">
                    来源：党委教师工作部|人力资源部
                  </div>
                  <div class="file-footer">
                    <div class="file-date">创建时间：2021-12-01</div>
                    <div class="file-number" :style="{ backgroundImage: 'url('+dow+')'}">
                      100次
                    </div>
                  </div>
                </div>
                <div class="file-download"><i class="el-icon-download" />下载</div>
              </div>
            </el-col>
            <el-col :span="8" class="custom-col">
              <div class="file-li">
                <div class="file-image"><el-image :src="word" /></div>
                <div class="file-content">
                  <div class="file-title">陕西省机关事业单位工勤人员升等级岗位考核审批表</div>
                  <div class="file-footer">
                    来源：党委教师工作部|人力资源部
                  </div>
                  <div class="file-footer">
                    <div class="file-date">创建时间：2021-12-01</div>
                    <div class="file-number" :style="{ backgroundImage: 'url('+dow+')'}">
                      100次
                    </div>
                  </div>
                </div>
                <div class="file-download"><i class="el-icon-download" />下载</div>
              </div>
            </el-col>
            <el-col :span="8" class="custom-col">
              <div class="file-li">
                <div class="file-image"><el-image :src="word" /></div>
                <div class="file-content">
                  <div class="file-title">陕西省机关事业单位工勤人员升等级岗位考核审批表</div>
                  <div class="file-footer">
                    来源：党委教师工作部|人力资源部
                  </div>
                  <div class="file-footer">
                    <div class="file-date">创建时间：2021-12-01</div>
                    <div class="file-number" :style="{ backgroundImage: 'url('+dow+')'}">
                      100次
                    </div>
                  </div>
                </div>
                <div class="file-download"><i class="el-icon-download" />下载</div>
              </div>
            </el-col>
            <el-col :span="8" class="custom-col">
              <div class="file-li">
                <div class="file-image"><el-image :src="word" /></div>
                <div class="file-content">
                  <div class="file-title">陕西省机关事业单位工勤人员升等级岗位考核审批表</div>
                  <div class="file-footer">
                    来源：党委教师工作部|人力资源部
                  </div>
                  <div class="file-footer">
                    <div class="file-date">创建时间：2021-12-01</div>
                    <div class="file-number" :style="{ backgroundImage: 'url('+dow+')'}">
                      100次
                    </div>
                  </div>
                </div>
                <div class="file-download"><i class="el-icon-download" />下载</div>
              </div>
            </el-col>
            <el-col :span="8" class="custom-col">
              <div class="file-li">
                <div class="file-image"><el-image :src="word" /></div>
                <div class="file-content">
                  <div class="file-title">陕西省机关事业单位工勤人员升等级岗位考核审批表</div>
                  <div class="file-footer">
                    来源：党委教师工作部|人力资源部
                  </div>
                  <div class="file-footer">
                    <div class="file-date">创建时间：2021-12-01</div>
                    <div class="file-number" :style="{ backgroundImage: 'url('+dow+')'}">
                      100次
                    </div>
                  </div>
                </div>
                <div class="file-download"><i class="el-icon-download" />下载</div>
              </div>
            </el-col>
            <el-col :span="8" class="custom-col">
              <div class="file-li">
                <div class="file-image"><el-image :src="word" /></div>
                <div class="file-content">
                  <div class="file-title">陕西省机关事业单位工勤人员升等级岗位考核审批表</div>
                  <div class="file-footer">
                    来源：党委教师工作部|人力资源部
                  </div>
                  <div class="file-footer">
                    <div class="file-date">创建时间：2021-12-01</div>
                    <div class="file-number" :style="{ backgroundImage: 'url('+dow+')'}">
                      100次
                    </div>
                  </div>
                </div>
                <div class="file-download"><i class="el-icon-download" />下载</div>
              </div>
            </el-col>
            <el-col :span="8" class="custom-col">
              <div class="file-li">
                <div class="file-image"><el-image :src="word" /></div>
                <div class="file-content">
                  <div class="file-title">陕西省机关事业单位工勤人员升等级岗位考核审批表</div>
                  <div class="file-footer">
                    来源：党委教师工作部|人力资源部
                  </div>
                  <div class="file-footer">
                    <div class="file-date">创建时间：2021-12-01</div>
                    <div class="file-number" :style="{ backgroundImage: 'url('+dow+')'}">
                      100次
                    </div>
                  </div>
                </div>
                <div class="file-download"><i class="el-icon-download" />下载</div>
              </div>
            </el-col>
            <el-col :span="8" class="custom-col">
              <div class="file-li">
                <div class="file-image"><el-image :src="word" /></div>
                <div class="file-content">
                  <div class="file-title">陕西省机关事业单位工勤人员升等级岗位考核审批表</div>
                  <div class="file-footer">
                    来源：党委教师工作部|人力资源部
                  </div>
                  <div class="file-footer">
                    <div class="file-date">创建时间：2021-12-01</div>
                    <div class="file-number" :style="{ backgroundImage: 'url('+dow+')'}">
                      100次
                    </div>
                  </div>
                </div>
                <div class="file-download"><i class="el-icon-download" />下载</div>
              </div>
            </el-col>
            <el-col :span="8" class="custom-col">
              <div class="file-li">
                <div class="file-image"><el-image :src="word" /></div>
                <div class="file-content">
                  <div class="file-title">陕西省机关事业单位工勤人员升等级岗位考核审批表</div>
                  <div class="file-footer">
                    来源：党委教师工作部|人力资源部
                  </div>
                  <div class="file-footer">
                    <div class="file-date">创建时间：2021-12-01</div>
                    <div class="file-number" :style="{ backgroundImage: 'url('+dow+')'}">
                      100次
                    </div>
                  </div>
                </div>
                <div class="file-download"><i class="el-icon-download" />下载</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="custom-pager">
        <div class="custom-resources-body" style="text-align: center">
          <el-pagination
            :current-page.sync="current"
            :page-size="9"
            layout="prev, pager, next, jumper"
            :total="105"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ResourcesDownload',
  data() {
    return {
      baseURL: process.env.VUE_APP_BASE_API.substring(
        0,
        process.env.VUE_APP_BASE_API.length - 1
      ),
      select: 'a',
      input: '',
      image: require('@/assets/images/download.jpg'),
      bak: require('@/assets/images/bak_lm.jpg'),
      headerImage: require('@/assets/images/header_bak.png'),
      dow: require('@/assets/images/dow.png'),
      word: require('@/assets/images/word1.png'),
      excel: require('@/assets/images/xls.png'),
      pdf: require('@/assets/images/pdf_new.png'),
      active: 1,
      current: 1
    }
  },
  methods: {
    changeMenu(data) {
      this.active = data
    },
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>

<style scoped>
.custom-resources-download {
  width: 100%;
  height: 100%;
  position: relative;
}
.custom-resources-content {
  width: 100%;
  height: 100%;
}
.custom-resources-header {
  width: 100%;
  height: 440px;
  position: relative;
}
.custom-resources-header .el-image {
  width: 100%;
  height: 440px;
}
.custom-article {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.custom-resources-statistical {
  position: absolute;
  top: 354px;
  left: 0px;
  right: 0px;
  height: 160px;
  z-index: 10;
}
.custom-resources-body {
  padding: 0px 65px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.custom-resources-body .custom-resources-content{
  display: flex;
  flex-flow: row nowrap;
}
.header-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-family: Microsoft YaHei;
}
.title-h1 {
  font-size: 32px;
  font-weight: bold;
  color: #212A39;
  margin-top: 122px;
}
.title-h5 {
  color: #6B6F8C;
  font-weight: 400;
  font-size: 16px;
}
.statistical-right {
  flex: 0 1 auto;
  width: 330px;
  height: 100%;
}
.statistical-left {
  flex: 1 1;
  height: 100%;
}
.statistical-content {
  width: 100%;
  height: 100%;
}
.statistical-left .statistical-content {
  padding-right: 20px;
  box-sizing: border-box;
}
.statistical-article-center .statistical-content {
  padding-top: 20px;
  padding-bottom: 20px;
  line-height: 120px;
}
.statistical-article {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-flow: row nowrap;
}
.statistical-article-center {
  flex: 0 1 auto;
  height: 100%;
  width: 33.333%;
  position: relative;
  padding-left: 5%;
  box-sizing: border-box;
}
.statistical-article-center:not(:first-child)::before {
  content: ' ';
  position: absolute;
  top:30px;
  bottom: 30px;
  left: 0px;
  width: 1px;
  background-color: #F4F4F4;
}
.content-body {
  width: 100%;
  height: 100%;
}
.statistical-content .content-body{
  display: flex;
  flex-flow: row nowrap;
}
.half .content-body {
  display: flex;
  flex-flow: column nowrap;
}
.content-title {
  flex: 1 1 auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height: 100%;
  text-align: left;
  font-size: 16px;
}
.content-number {
  flex: 0 1 auto;
  width: 100px;
  height: 100%;
  text-align: right;
  font-size: 13px;
  color: #6B6F8C;
  font-weight: 400;
}
.content-number label {
  color: #212A39;
  font-size: 18px;
  font-weight: bold;
}
.content-half {
  width: 100%;
  height: 60px;
  flex: 0 1 auto;
  display: flex;
  flex-flow: row nowrap;
  line-height: 60px;
}
.statistical-bak {
  background-size: 100% 100%;
  background-position: 0% 0%;
  background-repeat: no-repeat;
  position: relative;
}
.statistical-right-image {
  position: absolute;
  height: 50px;
  width: 111px;
  top: 0px;
  right: 0px;
  left: 0px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  line-height: 40px;
  text-indent: 5px;
}
.statistical-right-li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 18px;
  color: #212A39;
  font-family: Microsoft YaHei;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.statistical-article.statistical-bak{
  display: block;
}
.statistical-right-li.first{
  margin-top: 50px;
}
.statistical-right-li.last{
  font-size: 12px;
  font-weight: 400;
  color: #212A39;
  margin-top: 20px;
}
.custom-resources-footer {
  width: 100%;
  height: auto;
}
.el-select >>> .el-input {
  width: 130px;
}
.custom-query-body {
  height: 80px;
  width: 100%;
  margin-top: 80px;
}
.custom-article-li {
  height: 80px;
  width: 100%;
}
.custom-resources-input {
  width: 400px;
  padding-top: 30px;
  box-sizing: border-box;
}
.custom-ul {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  display: flex;
  flex-flow: row nowrap;
}
.custom-ul-li {
  flex: 0 1 auto;
  width: 120px;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
  background-color: #fff;
  border-radius: 4px;
  cursor: pointer;
}
.custom-ul-li:not(:first-child) {
  margin-left: 5px;
}
.custom-ul-li.active{
  border: 1px solid #276EED;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #276EED;
}
.custom-file-body {
  width: 100%;
  height: 554px;
}
.file-li {
  width: 100%;
  height: 148px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  display: flex;
  flex-flow: row nowrap;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.file-image {
  flex: 0 1 auto;
  height: 100%;
  width: 108px;
}
.file-image .el-image {
  width: 63px;
  margin-top: 22px;
  margin-left: 22px;
}
.file-content {
  flex: 1 1 auto;
  height: 100%;
  padding-right: 10px;
  box-sizing: border-box;
  display: flex;
  flex-flow: column nowrap;
  padding-left: 5px;
}
.file-title {
  flex: 0 1 auto;
  width: 100%;
  height: 85px;
  padding-top: 20px;
  box-sizing: border-box;
  line-height: 20px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #212A39;
}
.file-footer {
  flex: 0 1 auto;
  width: 100%;
  height: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #A1A4BB;
  display: flex;
  flex-flow: row nowrap;
}
.file-date {
  flex: 1 1 auto;
  height: 100%;
  text-align: left;
}
.file-number {
  flex: 0 1 auto;
  height: 100%;
  text-align: right;
  width: 60px;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.custom-col {
  margin-top: 20px;
}
.custom-pager {
  width: 100%;
  height: 40px;
  margin-top: 20px;
}
.file-download {
  position: absolute;
  height: 35px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: #276EED;
  line-height: 35px;
  color: #fff;
  font-size: 13px;
  text-align: center;
  display: none;
}
.file-li:hover .file-download {
  display: block;
}
</style>
